<template>
    <van-tabbar v-model="active" active-color=" #ff5f16" inactive-color=" #797d82" @change="changeTab">
        <van-tabbar-item>
            <van-icon size="20" slot="icon" class="iconfont icon-dianying"></van-icon>
            <span>电影/影院</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon size="20" slot="icon" class="iconfont icon-yingyuan"></van-icon>
            <span>视频</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon size="20" slot="icon" class="iconfont icon-zixun"></van-icon>
            <span>演出</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon size="20" slot="icon" class="iconfont icon-wode"></van-icon>
            <span>我的</span>
        </van-tabbar-item>
    </van-tabbar>
</template>
<script>
    import Vue from "vue";
    import { Tabbar, TabbarItem,Icon} from "vant";
    import '@/assets/iconfont/iconfont.css'
    Vue.use(Tabbar);
    Vue.use(TabbarItem);
    Vue.use(Icon)
    export default {
         data() {
            return {
            active: 0,
            url:[
                "/films/hotmovie",
                "/video",
                '/',
                "/"
            ]
            }
        },
        created(){
            this.active = this.url.indexOf(this.$route.path)
        },
        methods: {
            //改变菜单后触发
            changeTab(index){
                this.$router.push(this.url[index]);
            },
        },
    }
</script>
<style scoped>
.van-tabbar {
    border-top: .5px solid #d8d8d8;
    width:100%;
    height: 48px;
    display: flex;
    position: fixed;
    justify-content: space-around;
    align-items: center;
    bottom:0;
    text-align: center;
     font-size: 10px;
    color: #696969;
}
</style>